import React, { useEffect, useState } from 'react'
import "../../../api/data"
import axios from "axios";
import { Search, Tabs, Swiper, Image, Grid, } from 'react-vant';
import { useDispatch, useSelector } from "react-redux"
import { GETLIST, ALLSTATE } from "../../../types/store.d"
import Swipers from "../../../components/Swipers"
import Item from "../../../components/Item"
function Index() {
    const dispatch = useDispatch()
    const [value, setValue] = useState('');
    useEffect(() => {
        axios.get("/api/list").then(res => {
            dispatch({
                type: GETLIST,
                payload: res.data.list
            })
        })
    }, [])
    const listArr = useSelector((state: ALLSTATE) => {
        return state.listArr
    })
    console.log(listArr);

    return (
        <div className="index">

            <main>
                <div className="demo-tabs">
                    <Tabs active={0}>
                        {listArr.map((item, index) => (
                            <Tabs.TabPane key={index} title={item.name}>
                                <Swipers dataProps={item.imgs}></Swipers>
                                <Item data={item.info} ></Item>


                            </Tabs.TabPane>
                        ))}
                    </Tabs>
                </div>
            </main>

        </div>
    )
}

export default Index